<script setup>

import { computed } from "vue";

const order_option = computed(() => {
    return {
        title: {
            text: '近两分钟数据趋势',
            textStyle: {
                color: 'black' // Set the text color for the title
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Humidity', 'WaterLevel', 'Temperature'],
            textStyle: {
                color: 'white' // Set the text color for the title
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
            textStyle: {
                color: 'white' // Set the text color for the title
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            data: ['9.1', '9.2', '9.3', '9.4', '9.5', '9.6', '9.7']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    }
})

const type_option = computed(() => {
    return {
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [40, 110],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    { value: 40, name: '骑行家具' },
                    { value: 38, name: '科技用品' },
                    { value: 32, name: '服装鞋帽' },
                    { value: 30, name: '电脑配件' },
                    { value: 28, name: '美妆护肤' },
                    { value: 26, name: '汽车用品' },
                    { value: 22, name: '母婴用品' },
                    { value: 18, name: '家装家电' }
                ]
            }
        ]
    }
})
const time_option = computed(() => {
    return {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['3', '6', '9', '12', '18', '21', '24', '30']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [3254, 1811, 2133, 2199, 1981, 1913, 1913, 2811, 2751, 2803],
                type: 'line',
                areaStyle: {},
                smooth: true
            }
        ]
    }
})

const pay_option_1 = computed(() => {
    return {
        xAxis: {
            type: 'category',
            data: ['积分', '福利券', '现金']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [
                    {
                        value: 5000,
                        itemStyle: {
                            color: 'dodgerblue'
                        }
                    },
                    {
                        value: 6000,
                        itemStyle: {
                            color: '#42b983'
                        }
                    },
                    {
                        value: 7300,
                        itemStyle: {
                            color: 'darkseagreen'
                        }
                    }
                ],
                type: 'bar'
            }
        ]
    }
})

const pay_option_2 = computed(() => {
    return {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '微信' },
                    { value: 735, name: '支付宝' },
                    { value: 580, name: '其他' },
                ]
            }
        ]
    }
})

const pay_option_3 = computed(() => {
    return {
        title: {
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 484, name: '支付成功' },
                    { value: 300, name: '支付失败' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
})
const order_option_1 = computed(() => {
    return {
        xAxis: {
            type: 'category',
            data: ['待支付', '待发货', '待收货', '已收获', '已取消', '已退货']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [
                    {
                        value: 340,
                        itemStyle: {
                            color: '#42b983'
                        }
                    },
                    {
                        value: 700,
                        itemStyle: {
                            color: '#42b983'
                        }
                    },
                    {
                        value: 240,
                        itemStyle: {
                            color: '#42b983'
                        }
                    },
                    {
                        value: 1500,
                        itemStyle: {
                            color: '#42b983'
                        }
                    },
                    {
                        value: 740,
                        itemStyle: {
                            color: '#42b983'
                        }
                    },
                    {
                        value: 1700,
                        itemStyle: {
                            color: '#42b983'
                        }
                    },
                ],
                type: 'bar'
            }
        ]
    }
})

const order_option_2 = computed(() => {
    return {
        xAxis: {
            type: 'category',
            data: ['$0-100', '$100-500', '$500-1000', '$1000-3000', '$3000-5000', '$5000-7000', '$7000-9000', '$9000-15000', '$15000-30000', '>$30000']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [
                    {
                        value: 340,
                        itemStyle: {
                            color: 'darkslateblue'
                        }
                    },
                    {
                        value: 700,
                        itemStyle: {
                            color: 'darkslateblue'
                        }
                    },
                    {
                        value: 240,
                        itemStyle: {
                            color: 'darkslateblue'
                        }
                    },
                    {
                        value: 1500,
                        itemStyle: {
                            color: 'darkslateblue'
                        }
                    },
                    {
                        value: 740,
                        itemStyle: {
                            color: 'darkslateblue'
                        }
                    },
                    {
                        value: 1700,
                        itemStyle: {
                            color: 'darkslateblue'
                        }
                    },
                    {
                        value: 2310,
                        itemStyle: {
                            color: 'darkslateblue'
                        }
                    },
                    {
                        value: 1203,
                        itemStyle: {
                            color: 'darkslateblue'
                        }
                    },
                    {
                        value: 1703,
                        itemStyle: {
                            color: 'darkslateblue'
                        }
                    },
                    {
                        value: 703,
                        itemStyle: {
                            color: 'darkslateblue'
                        }
                    },
                ],
                type: 'bar'
            }
        ]
    }
})

</script>

<template>
    <el-row :gutter="20" style="margin-top: 40px;margin-left: 150px;min-width: 1200px;margin-bottom: 50px">
        <el-col :span="3" class="total border">
            <p><el-icon>
                    <Aim />
                </el-icon> 订单数量</p>
            <p class="number">200</p>
            <p>占平台订单比率 <span class="percent">1%</span></p>
        </el-col>
        <el-col :span="3" class="total border">
            <p><el-icon>
                    <Avatar />
                </el-icon> 下单人数</p>
            <p class="number">2500</p>
            <p>占平台订单比率 <span class="percent">2%</span></p>
        </el-col>
        <el-col :span="3" class="total border">
            <p><el-icon>
                    <View />
                </el-icon> 复购人数</p>
            <p class="number">200</p>
            <p>占平台订单比率 <span class="percent">3%</span></p>
        </el-col>
        <el-col :span="3" class="total border">
            <p><el-icon>
                    <View />
                </el-icon> 支付现金</p>
            <p class="number">2289</p>
            <p>占平台订单比率 <span class="percent">5%</span></p>
        </el-col>
        <el-col :span="3" class="total border">
            <p><el-icon>
                    <View />
                </el-icon> 支付积分</p>
            <p class="number">5000</p>
            <p>占平台订单比率 <span class="percent">3%</span></p>
        </el-col>
        <el-col :span="3" class="total">
            <p><el-icon>
                    <Coin />
                </el-icon> 毛利润</p>
            <p class="number">2000</p>
            <p>占平台订单比率 <span class="percent">2%</span></p>
        </el-col>
    </el-row>
    <el-container style=" margin-right: 200px;min-width: 1150px;height: 400px">
        <el-header>
            <p style="text-align: left;font-size: 20px;font-weight: bold;color: #606266">订单数量</p>
            <div class="line"></div>
        </el-header>
        <el-container>
            <el-aside width="750px">
                <e-charts class="chart" :option="order_option"></e-charts>
            </el-aside>
            <el-main>
                <e-charts class="chart" :option="type_option"></e-charts>
            </el-main>
        </el-container>
    </el-container>
    <p style="text-align: left;font-size: 20px;font-weight: bold;color: #606266;margin-top: 20px">下单时间分布
    </p>
    <div class="line2"></div>
    <el-row style="height: 400px;width: 1380px;margin-top: 10px;">
        <el-col :span="20" style="margin-right: 150px;">
            <e-charts class=" chart" :option="time_option"></e-charts>
        </el-col>
    </el-row>
    <el-row style="height: 350px;width: 1200px;margin: 10px auto;">
        <el-col :span="8">
            <p style="text-align: left;font-size: 15px;font-weight: bold;color: #606266">支付分布</p>
            <div class="line3"></div>
            <e-charts class="chart" :option="pay_option_1"></e-charts>
        </el-col>
        <el-col :span="8">
            <p style="text-align: left;font-size: 15px;font-weight: bold;color: #606266">支付方式</p>
            <div class="line3"></div>
            <e-charts class="chart" :option="pay_option_2"></e-charts>
        </el-col>
        <el-col :span="8">
            <p style="text-align: left;font-size: 15px;font-weight: bold;color: #606266">支付结果</p>
            <div class="line3"></div>
            <e-charts class="chart" :option="pay_option_3"></e-charts>
        </el-col>
    </el-row>
    <el-row style="height: 350px;width: 1200px;margin: 10px auto;">
        <el-col :span="12">
            <p style="text-align: left;font-size: 15px;font-weight: bold;color: #606266">订单状态分布</p>
            <div class="line3"></div>
            <e-charts class="chart" :option="order_option_1"></e-charts>
        </el-col>
        <el-col :span="12">
            <p style="text-align: left;font-size: 15px;font-weight: bold;color: #606266">订单金额分布</p>
            <div class="line3"></div>
            <e-charts class="chart" :option="order_option_2"></e-charts>
        </el-col>
    </el-row>
</template>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.total {
    height: 95px;
}

.border {
    border-right: 2px solid grey;
}

.number {
    font-weight: bold;
    font-size: 40px;
    color: #42b983;
}

.percent {
    color: #42b983;
}

.line {
    border: 1px solid grey;
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    color: darkseagreen;
}

.line2 {
    border: 1px solid grey;
    width: 90%;
    margin-top: 5px;
    /* margin-left: 205px; */
}

.line3 {
    border: 1px solid grey;
    width: 90%;
    margin-top: 5px;
}
</style>